<template>
  <div class="box">
    <!-- 轮播图 -->
    <div id="picture">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="05.jpg" alt="" /></van-swipe-item>
        <van-swipe-item><img src="06.jpg" alt="" /></van-swipe-item>
        <van-swipe-item><img src="07.jpg" alt="" /></van-swipe-item>
        <van-swipe-item><img src="08.jpg" alt="" /></van-swipe-item>
      </van-swipe>
    </div>
    <!-- 五个活动环节 -->
    <div id="xuyuan">
      <div class="wufen1">
        <span class="iconfont icon-ziyuan1"></span>
        <span class="wenzi">礼包中心</span>
      </div>
      <!--  -->
      <div class="wufen1">
        <span class="iconfont icon-huodongzhongxin"></span>
        <span class="wenzi">活动中心</span>
      </div>
      <!--  -->
      <div class="wufen1">
        <span class="iconfont icon-lianhe"></span>
        <span class="wenzi">抽免单</span>
      </div>
      <!--  -->
      <div class="wufen1">
        <span class="iconfont icon-tianjianghongbao"></span>
        <span class="wenzi">天降红包</span>
      </div>
      <!--  -->
      <div class="wufen1">
        <span class="iconfont icon-xuyuanchi"></span>
        <span class="wenzi">许愿池</span>
      </div>
    </div>
    <!-- 精彩活动 -->
    <div id="jingcai">
      <div class="huodong">热门精选</div>
      <span class="iconfont icon-youjiantou-tianchong"></span>
    </div>
    <!-- 瑶瑶公主 -->
    <div class="yaoyao">
      <div class="gongzhu" v-for="(v, i) in arr1" :key="i">
        <img :src="v.img" alt="" />
      </div>
    </div>
    <!-- 瑶瑶售价 -->
    <div class="shouban">
      <div class="Qban" v-for="(v, i) in arr2" :key="i">
        <p class="luling">{{ v.text }}</p>
        <p class="price">￥{{ v.text1 }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import getapi from "@/apis/getapi.js";
export default {
  mounted() {
    getapi("/xiaojiang").then((ok) => {
      this.arr1 = ok.data.data5;
      this.arr2 = ok.data.data6;
      // console.log(ok);
    });
  },
  data() {
    return {
      arr1: [],
      arr2: [],
    };
  },
};
</script>

<style scoped>
.box{
  width: 3.5rem;
  margin:  0 auto;
}
/* 轮播图 */
#picture {
  width: 100%;
  height: 1.6rem;
}

#picture img {
  width: 100%;
  height: 1.6rem;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.2rem;
  line-height: 1.6rem;
  text-align: center;
}
/* 五个活动环节 */
#xuyuan {
  width: 100%;
  height: 0.5rem;
  /* background-color: aqua; */
  display: flex;
  justify-content: space-between;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
.wufen1 {
  display: flex;
  flex-direction: column;
}
.wufen1 :nth-child(1) {
  width: 100%;
  height: 74%;
  font-size: 0.24rem;
  text-align: center;
  color: #f39231;
  margin-top: 0.05rem;
}
.wenzi {
  width: 100%;
  height: 20%;
  margin-bottom: 0.12rem;
}
/* 精选活动 */
#jingcai {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 0.2rem;
  /* background-color: burlywood; */
}
.huodong {
  font-size: 0.18rem;
  line-height: 0.2rem;
  font-weight: 900;
}
#jingcai span {
  font-size: 0.18rem;
  line-height: 0.2rem;
}
/* 瑶瑶公主 */
.yaoyao {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
}
.gongzhu {
  width: 100%;
  height: 1rem;
}
.gongzhu img {
  width: 100%;
  height: 100%;
}
/* 手办 */
.shouban {
  width: 100%;
  height: 0.4rem;
  /* background: #f39231; */
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-between;
}
.Qban {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 0.4rem;
  /* background-color: #4431f3; */
  /* border: 1px solid black; */
}
.price {
  color: #e64243;
  text-align: center;
}
.luling {
  text-align: center;
}
</style>